import * as React from 'react';
import { Row, Col, Form, Input, Button, message } from 'antd';
import { stateful } from '../../../utils/tools';
const FormItem = Form.Item
// 加载组件样式
const styles = require('./LoginForm.less');

// 定义组件属性接口，验证属性参数类型
// form参数不能是optional(?)
interface LoginFormProps {
  form: any;
  loading: Boolean;
  onSubmit: Function;
};

// 定义组件状态接口，验证状态参数类型

interface LoginFormState { };

// ts:form不支持statelesscomponent
/**
 * form定义
 */
const LoginForm: React.StatelessComponent<LoginFormProps> =
  ({ form: { getFieldDecorator, validateFields }, loading, onSubmit }) => {

  function handleSubmit (e: any) {
    e.preventDefault();
    // 错误检查
    validateFields( (errors, values) => {
      if (!errors) {
        // 提交
        onSubmit(values);
      }
    });
  }

  return (
    <Form onSubmit={handleSubmit}>
        <FormItem hasFeedback>
          {getFieldDecorator('username', {
            rules: [
              {
                required: true,
                message: '请填写用户名',
              },
            ],
          })(<Input size="large" placeholder="用户名" />)}
        </FormItem>
        <FormItem hasFeedback>
          {getFieldDecorator('password', {
            rules: [
              {
                required: true,
                message: '请填写密码',
              },
            ],
          })(<Input size="large" type="password" placeholder="密码" />)}
        </FormItem>
        <Row>
          <Button type="primary" size="large" htmlType="submit" loading={loading}>
            登录
          </Button>
          {/*<p>
            <span>账号：guest</span>
            <span>密码：guest</span>
          </p>*/}
        </Row>
      </Form>
  );
};

/*class LoginForm extends React.Component<LoginFormProps, LoginFormState> {

  constructor(props, context) {
    super(props, context);
  };

  componentWillMount() {

  }

  componentWillReceiveProps<LoginFormProps>(nextProps:LoginFormProps) {

  }
  // 使用箭头函数

  handleSubmit = (e: any): void => {
    e.preventDefault();
    const { form: { validateFields }, onSubmit } = this.props;
    // 错误检查
    validateFields( (errors, values) => {
      if (!errors) {
        // 提交
        onSubmit(values);
      }
    });

    // const _self = this;
    // _self.props.form.validateFields(function (errors, values) {
    //   if (errors) {
    //     message.error('您的登录表单填写有误！');
    //     return false;
    //   }
    //   if (!values.account) {
    //     message.error('您的登录帐号不能为空！');
    //     return false;
    //   }
    //   if (!values.password) {
    //     message.error('您的登录密码不能为空！');
    //     return false;
    //   }
    //   _self.props.onSubmit(values);
    // });
  };

  render() {
    const { form: { getFieldDecorator }, loading } = this.props;
    const formItemLayout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 14,
      },
    };
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem hasFeedback>
          {getFieldDecorator('username', {
            rules: [
              {
                required: true,
                message: '请填写用户名',
              },
            ],
          })(<Input size="large" placeholder="用户名" />)}
        </FormItem>
        <FormItem hasFeedback>
          {getFieldDecorator('password', {
            rules: [
              {
                required: true,
                message: '请填写密码',
              },
            ],
          })(<Input size="large" type="password" placeholder="密码" />)}
        </FormItem>
        <Row>
          <Button type="primary" size="large" htmlType="submit" loading={loading}>
            登录
          </Button>
          <p>
            <span>账号：guest</span>
            <span>密码：guest</span>
          </p>
        </Row>
      </Form>
    );
  };
};*/

export default Form.create()(stateful(LoginForm));
